<template>
  <div class="app-container">
    <h3>欧气值排行榜</h3>
    <el-table 
      ref="tables" 
      v-loading="loading" 
      :data="rankList"
      style="width: 100%"
    >
      <el-table-column 
        type="index" 
        width="50" 
        align="center" 
      />
      <el-table-column 
        label="用户名" 
        align="center" 
        width="150" 
        prop="userName" 
        :show-overflow-tooltip="false"
      />
      <el-table-column 
        label="用户欧气值" 
        align="center" 
        prop="value" 
        sortable
      />
      <el-table-column 
        label="时间" 
        align="center" 
        width="200" 
        prop="date"
      >
        <template slot-scope="scope">
          {{ formatDate(scope.row.date) }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style>
.app-container {
  padding: 20px;
}
.el-table {
  margin-top: 20px;
}
</style>

<script>
import { getRankList } from "@/api/card/rank";

export default {
  name: "card",
  data() {
    return {
      loading: true,
      rankList: [],
      form: {}
    };
  },
  created() {
    this.getRankList();
  },
  methods: {
    async getRankList() {
      try {
        const response = await getRankList();
        this.rankList = response.data;
        this.loading = false;
      } catch (error) {
        console.error("获取排行榜失败:", error);
        this.loading = false;
      }
    },
    formatDate(dateString) {
      if (!dateString) return '';
      
      try {
        const date = new Date(dateString);
        // Format as YYYY-MM-DD HH:mm:ss
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');
        
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      } catch (e) {
        console.error("日期格式化错误:", e);
        return dateString; // Return original if formatting fails
      }
    }
  }
};
</script>